<template>
  <div class="box">
    <el-form ref="userForm" :model="user_forms" :rules="userRules" :label-position="labelPosition" label-width="100px">
      <el-form-item  prop="username" label="管理员账号">
        <el-input size="medium" v-model="user_forms.username" placeholder="请输入管理员账号"></el-input>
      </el-form-item>
  <!--    <el-form-item v-else prop="username" label="管理员账号">
        <span>{{ user_forms.username }}</span>
      </el-form-item> -->
      <el-form-item v-if="user_type=='add'" prop="password" label="管理员密码">
        <el-input size="medium" v-model="user_forms.password" placeholder="请输入管理员密码" type="password"></el-input>
      </el-form-item>
      <el-form-item v-else label="管理员密码">
        <el-input size="medium" v-model="user_forms.password" placeholder="请输入管理员密码" type="password"></el-input>
      </el-form-item>

      <el-form-item prop="name" label="用户昵称">
        <el-input size="medium" v-model="user_forms.name" placeholder="请输入管理员昵称"></el-input>
      </el-form-item>
      <el-form-item prop="mobile" label="联系号码">
        <el-input size="medium" v-model="user_forms.mobile" placeholder="请输入联系号码"></el-input>
      </el-form-item>

      <el-form-item prop="role_id" label="角色">
        <el-select :disabled="is_root" size="medium" v-model="user_forms.role_id">
          <el-option v-for="item in allroleslist" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账号状态">
        <el-radio-group :disabled="is_root" v-model="user_forms.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" @click="addSave" v-if="user_type=='add'">确定</el-button>
        <el-button size="medium" @click="editSave" v-else>确定</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  import {
    mapGetters
  } from 'vuex'
import {objextend} from '@/utils/index';

  import {
    saveadminuser,
    getuserdetail,
    editadminuser
  } from '@/api/mall/admin'
  export default {
    name: 'Edituser',
    data() {
      const validateMobile = (rule, value, callback) => {
        if (!(/^1[23456789]\d{9}$/.test(value))) {
          callback(new Error('手机号码有误，请重填'))
        } else {
          callback()
        }
      }
      return {
        labelPosition: 'left',
        is_root:0,
        user_forms: {
          username: '',
          name: "",
          mobile: '',
          password: '',
          role_id: '',
          status: 1
        },
        userRules: {
          name: [{
            required: true,
            trigger: 'blur',
            message: '请输入管理员名',
          }, ],
          username: [{
              required: true,
              trigger: 'blur',
              message: '请输入管理员账号'
            },
            {
              min: 4,
              max: 32,
              message: '长度在 4 到32 个字符',
              trigger: 'blur'
            }
          ],
          password: [{
            required: true,
            trigger: 'blur',
            message: '请输入管理员密码',
          }],
          mobile: [{
            required: true,
            trigger: 'blur',
            validator: validateMobile
          }],
          role_id: [{
            required: true,
            trigger: 'change',
            message: '请选择管理员角色',
          }],
        },
      }
    },
    props: {
      user_type: {
        type: String,
        default: 'add'
      },
      uid: {
        type: Number,
        default: -1,
      }
    },
    computed: {
      ...mapGetters([
        'allroleslist',
      ]),

    },
    watch: {
      uid() {
        this.user_forms = {
          username: '',
          name: "",
          mobile: '',
          password: '',
          role_id: '',
          status: 1
        };
        this.getlist()
      }
    },
    methods: {
      getlist() {
        if (this.uid == -1) {
          return false
        }
        var data = {
          id: this.uid
        }
        getuserdetail(data).then(res => {
          var jsondata = res.msg;
          // jsondata.status = Number(jsondata.status == '正常')
          this.is_root=jsondata.is_root
          this.user_forms =objextend(this.user_forms,jsondata)
          this.user_forms.id=jsondata.id;
          this.user_forms.update_time=jsondata.update_time
        })
      },
      addSave() {
        var _this = this
        this.$refs.userForm.validate(valid => {
          if (valid) {
            var data = _this.user_forms
            saveadminuser(data).then(res => {
              _this.close()
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })

      },
      editSave() {
        var _this = this
        this.$refs.userForm.validate(valid => {
          if (valid) {
            var data = _this.user_forms
            if(!data.password){
              delete data.password
            }
            editadminuser(data).then(res => {
              _this.close()
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })

      },
      close() {
        this.user_forms = {
          username: '',
          name: "",
          mobile: '',
          password: '',
          role_id: '',
          status: 1
        }
        // this.uid=''
        this.$emit('on-close')
      },
    },
    mounted() {
      if (this.uid) {
        this.getlist()
      }

    }
  }
</script>

<style scoped>
  .el-input {
    width: 270px;
  }

  .box {
    width: 100%;
    /*padding: 60px;
    height: calc(100vh - 77px);
    overflow: scroll;*/
  }
</style>
